<template>
  <div class="article">
    <!-- 文章头部 -->
    <header class="article-header" v-loading="loading">
      <h1 class="article-title">{{ article.title }}</h1>
      <div class="article-meta">
        <span class="author">By {{ article.author }}</span>
        <span class="divider">•</span>
        <span class="timestamp">{{ article.timestamp }}</span>
        <span v-if="article.viewCount" class="view-count">
          | 阅读量: {{ article.viewCount || 0 }}
        </span>
        <br>
        <div class="tags-container">
          <template v-for="(tag, index) in tags" :key="index">
            <el-tag class="tag" type="info" size="small">{{ tag }}</el-tag>
            <span v-if="index !== tags.length - 1" class="tag-separator">•</span>
          </template>
        </div>
      </div>
    </header>

    <!-- 文章内容 -->
    <div class="article-content" v-loading="loading">
      <div class="admin-content" v-html="article.contentHtml"></div>
    </div>

    <!-- 相关文章 -->
    <div v-if="relatedArticles?.length" class="related-articles">
      <h3 class="related-title">Related Articles</h3>
      <div class="related-articles-list">
        <div
            v-for="relatedArticle in relatedArticles"
            :key="relatedArticle.id"
            class="related-article"
        >
          <a :href="`/article/${relatedArticle.id}`" class="related-link">
            <img
                :src="relatedArticle.thumbnailUrl"
                :alt="relatedArticle.title"
                class="related-image"
            >
            <h4 class="related-article-title">{{ relatedArticle.title }}</h4>
          </a>
        </div>
      </div>
    </div>

    <!-- 添加悬浮导航工具栏 -->
    <div class="float-nav" :class="{ 'show-rocket': showBackTop }">
      <el-tooltip content="返回首页" placement="left">
        <div class="nav-item home-btn" @click="goHome">
          <el-icon><HomeFilled /></el-icon>
        </div>
      </el-tooltip>

      <el-tooltip content="返回顶部" placement="left">
        <div class="nav-item rocket-btn" @click="scrollToTop">
          <div class="rocket">
            <el-icon><Top /></el-icon>
          </div>
          <div class="rocket-flame"></div>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, onUnmounted} from 'vue'
import {useRoute} from 'vue-router'
import { useRouter } from 'vue-router'
import {useArticleStore} from '@/store/article'
import { HomeFilled, Top } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const showBackTop = ref(false)
const articleStore = useArticleStore()
const article = ref({})
const viewCount = ref(0)
const relatedArticles = ref({})
const loading = ref(false)
const tags = ref({})

// 监听滚动
const handleScroll = () => {
  showBackTop.value = window.scrollY > 300
}

// 返回首页
const goHome = () => {
  router.push('/')
}

// 返回顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

const loadArticle = async () => {
  loading.value = true
  try {
    const id = route.params.id
    await articleStore.fetchArticle(id)
    article.value = articleStore.currentArticle
    relatedArticles.value = articleStore.relatedArticles
    // 初始化阅读量
    viewCount.value = articleStore.count
    tags.value = articleStore.tags
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  loadArticle()
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped lang="scss">
@import "@/styles/article.css";
</style>
